<template>
	<view class="box">
		<view class="box2">
			<view>
				<u-search class="search" :clearabled="true"></u-search>
			</view>
		</view>
		<!-- 历史搜索 -->
		<view class="lishi">
				<p style="margin-left: 25px;">历史搜索</p>
			<view class="">
				<u-tag :text="span" type="success" class="biaoqian"></u-tag>
				<u-tag text="标签"type="success" class="biaoqian"></u-tag>
				<u-tag text="标签"type="success" class="biaoqian"></u-tag>
				<u-tag text="标签"type="success" class="biaoqian"></u-tag>
				<u-tag text="标签"type="success" class="biaoqian"></u-tag>
				<u-tag text="标签"type="success" class="biaoqian"></u-tag>
				<u-tag text="标签"type="success" class="biaoqian"></u-tag>
				<u-tag text="标签"type="success" class="biaoqian"></u-tag>
			</view>
		</view>
		<!-- 热门搜索 -->
		<view class="remen">
			<view class="">
				
			</view>
		</view>
	</view>

</template>

<script>
	export default {
		data() {
			return {
				span:"qqq"
			}
		},
		methods: {
		}
	}
</script>

<style>
	.box {
		background-color: #ECFDFA;
		height: 840px;
	}

	.box1 {
		width: 80%;
		height: 100px;
		margin: 0 auto;
		position: relative;
		top: 40px;
	}

	.box2 {
		width: 100%;
		height: 80px;
		background: #2BCDDD;
		margin-top: 10px;
	}
	.search{
		position: relative;
		top: 20px;
	}
	.lishi{
		width: 88%;
		margin:0 auto;
		height: 150px;
		background-color: #007AFF;
	}
	.remen{
		width: 88%;
		margin:0 auto;
		height: 100px;
		background-color: #303133;
	}
	.biaoqian{
		width: 50px;
		height: 40px;
		float: left;
		margin-left: 30px;
		margin-top: 20px;
	}

</style>
